<template>
  <div class="role-container">
    <div class="tip">Hi，我是您的专属AI助手~</div>
    <div class="content">
      <div class="list">
        <div class="item">
          <div class="icon">
            <img src="@/assets/images/role-1.png" alt="" />
          </div>
          <div class="text">销售部门</div>
          <div class="desc">与各渠道建立合作关系提高销售额相关内容资料，与各渠道建立合作。</div>
        </div>
        <div class="item">
          <div class="icon">
            <img src="@/assets/images/role-1.png" alt="" />
          </div>
          <div class="text">采购部门</div>
          <div class="desc">原材料的及其他材料的采购相关资料，原材料的及其他材料的采购相关资料。</div>
        </div>
        <div class="item">
          <div class="icon">
            <img src="@/assets/images/role-1.png" alt="" />
          </div>
          <div class="text">质量管理</div>
          <div class="desc">针对质量监督及管理相关内容整理，针对质量监督及管理相关内容整理。</div>
        </div>
        <div class="item">
          <div class="icon">
            <img src="@/assets/images/role-1.png" alt="" />
          </div>
          <div class="text">仓储物流</div>
          <div class="desc">管理仓库库存和药品按规定存储和周转相关资料，管理仓库库存和药品。</div>
        </div>
        <div class="item">
          <div class="icon">
            <img src="@/assets/images/role-1.png" alt="" />
          </div>
          <div class="text">产品研发</div>
          <div class="desc">包含临床实验相关资料及药物安全和科研药理等的相关资料整理。</div>
        </div>
        <div class="item">
          <div class="icon">
            <img src="@/assets/images/role-1.png" alt="" />
          </div>
          <div class="text">市场推广</div>
          <div class="desc">产品策略规划及市场定位、竞争分析，相关学术讨论等相关市场推广资料整理。</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ComponentInternalInstance, getCurrentInstance, inject, onMounted, reactive } from "vue";
// 获取当前主题
const themeColor: any = inject("themeColor");
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
interface IState {
  active: number;
  tabList: Array<any>;
}
const state: IState = reactive({
  active: 1,
  tabList: [
    {
      title: "助手",
      conComponentName: "assistant",
    },
    {
      title: "角色",
      conComponentName: "role",
    },
    {
      title: "频道",
      conComponentName: "channel",
    },
  ],
});

onMounted(() => {
  proxy?.$utils.setCheckDomColor(".main-container", "background", themeColor.fillColorLighten);
});
</script>

<style lang="scss" scoped>
.role-container {
  width: 100%;
  padding: 20px 0;
  .tip {
    display: block;
    font-size: 28px;
    color: v-bind("themeColor.textColorLightest");
    margin: 20px 0;
    font-weight: 500;
  }
  .content {
    margin-top: 45.36px;
    .list {
      display: grid;
      grid-template-columns: repeat(2, 48%);
      grid-row-gap: 19px;
      grid-column-gap: 19px;
      .item {
        border-radius: 24px;
        background: v-bind("themeColor.fillColorLightest");
        padding: 44px;
        .icon {
          width: 52px;
          margin-bottom: 36.64px;
          img {
            width: 100%;
          }
        }
        .text {
          font-size: 32px;
          font-weight: 700;
          letter-spacing: 0px;
          line-height: 44.8px;
          color: v-bind("themeColor.textColor");
          text-align: left;
          vertical-align: top;
        }
        .desc {
          margin-top: 6px;
          font-size: 20px;
          font-weight: 500;
          letter-spacing: 0px;
          line-height: 28px;
          color: v-bind("themeColor.textColorLighten");
          text-align: left;
          vertical-align: top;
        }
      }
    }
  }
}
</style>
